<template>
  <ElDrawer v-bind="getBindValue" destroy-on-close lock-scroll :close-on-click-modal="false">
    <template #header>
      <div class="flex justify-between">
        <slot name="title">
          {{ title }}
        </slot>
      </div>
    </template>

    <ElScrollbar>
      <slot></slot>
    </ElScrollbar>

    <template #footer>
      <span v-if="!slots.footer">
        <div style="flex: auto">
          <ElButton class="mr-2" @click="handleClose">
            {{ cancelText ? cancelText : t('dialogDemo.close') }}
          </ElButton>
          <ElButton class="mr-2" type="primary" @click="handleConfirm">
            {{ confirmText ? confirmText : t('exampleDemo.save') }}
          </ElButton>
        </div>
      </span>
      <slot v-else name="footer"></slot>
    </template>
  </ElDrawer>
</template>
<script setup lang="ts">
import { ElDrawer, ElScrollbar, ElButton } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { computed, useAttrs, useSlots } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

const slots = useSlots()

const emit = defineEmits(['close', 'confirm'])

const props = defineProps({
  modelValue: propTypes.bool.def(false),
  title: propTypes.string.def('Drawer'),
  size: propTypes.oneOfType([String, Number]).def('40%'),
  confirmText: propTypes.string.def(''),
  cancelText: propTypes.string.def('')
})

const getBindValue = computed(() => {
  const delArr: string[] = ['fullscreen', 'title', 'size']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})

const handleClose = () => {
  emit('close')
}

const handleConfirm = () => {
  emit('confirm')
}
</script>
<style lang="scss">
.#{$elNamespace}-drawer__header {
  margin-right: 0 !important;
  border-bottom: 1px solid var(--tags-view-border-color);
}

.#{$elNamespace}-drawer__footer {
  border-top: 1px solid var(--tags-view-border-color);
}

.is-hover {
  &:hover {
    color: var(--el-color-primary) !important;
  }
}

.dark {
  .#{$elNamespace}-drawer__header {
    border-bottom: 1px solid var(--el-border-color);
  }

  .#{$elNamespace}-drawer__footer {
    border-top: 1px solid var(--el-border-color);
  }
}
</style>
